<!DOCTYPE html>
<html>
<html xmlns:th="http://www.thymeleaf.org">
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" th:href="@{/iconfont/demo.css}">
  <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
  <script th:src="@{/iconfont/iconfont.js}"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
  <body>
  <div class="main">
      <div class="nav-tabs">
          <ul id="tabs" class="dib-box">
              <li class="dib active"><span>Unicode</span></li>
              <li class="dib"><span>Font class</span></li>
              <li class="dib"><span>Symbol</span></li>
          </ul>

      </div>
      <div class="tab-container">
          <div class="content unicode" style="display: block;">
              <ul class="icon_lists dib-box">

                  <li class="dib">
                      <span class="icon iconfont">&#xe635;</span>
                      <div class="name">文档</div>
                      <div class="code-name">&amp;#xe635;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe634;</span>
                      <div class="name">警告</div>
                      <div class="code-name">&amp;#xe634;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe66d;</span>
                      <div class="name">系统监控</div>
                      <div class="code-name">&amp;#xe66d;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe62f;</span>
                      <div class="name">交换</div>
                      <div class="code-name">&amp;#xe62f;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe63b;</span>
                      <div class="name">公文搜索</div>
                      <div class="code-name">&amp;#xe63b;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe686;</span>
                      <div class="name">部门</div>
                      <div class="code-name">&amp;#xe686;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe64b;</span>
                      <div class="name">ETL-关联</div>
                      <div class="code-name">&amp;#xe64b;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe633;</span>
                      <div class="name">综合监控</div>
                      <div class="code-name">&amp;#xe633;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6c1;</span>
                      <div class="name">监控</div>
                      <div class="code-name">&amp;#xe6c1;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe662;</span>
                      <div class="name">搜索文件夹</div>
                      <div class="code-name">&amp;#xe662;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe646;</span>
                      <div class="name">标签搜索</div>
                      <div class="code-name">&amp;#xe646;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe612;</span>
                      <div class="name">权限</div>
                      <div class="code-name">&amp;#xe612;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe631;</span>
                      <div class="name">搜索列表2</div>
                      <div class="code-name">&amp;#xe631;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe665;</span>
                      <div class="name">用户</div>
                      <div class="code-name">&amp;#xe665;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe69d;</span>
                      <div class="name">日志</div>
                      <div class="code-name">&amp;#xe69d;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe757;</span>
                      <div class="name">权限审阅</div>
                      <div class="code-name">&amp;#xe757;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe627;</span>
                      <div class="name">规则合格性检查</div>
                      <div class="code-name">&amp;#xe627;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xeb56;</span>
                      <div class="name">管理员搜索_o</div>
                      <div class="code-name">&amp;#xeb56;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe649;</span>
                      <div class="name">字典管理</div>
                      <div class="code-name">&amp;#xe649;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6b0;</span>
                      <div class="name">用户管理</div>
                      <div class="code-name">&amp;#xe6b0;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe713;</span>
                      <div class="name">用户</div>
                      <div class="code-name">&amp;#xe713;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe66c;</span>
                      <div class="name">下载</div>
                      <div class="code-name">&amp;#xe66c;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe62a;</span>
                      <div class="name">最新产品</div>
                      <div class="code-name">&amp;#xe62a;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe722;</span>
                      <div class="name">统计</div>
                      <div class="code-name">&amp;#xe722;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe611;</span>
                      <div class="name">电脑</div>
                      <div class="code-name">&amp;#xe611;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe629;</span>
                      <div class="name">平台级业务监控</div>
                      <div class="code-name">&amp;#xe629;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe752;</span>
                      <div class="name">部门管理</div>
                      <div class="code-name">&amp;#xe752;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6e3;</span>
                      <div class="name">api</div>
                      <div class="code-name">&amp;#xe6e3;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe656;</span>
                      <div class="name">代办事项</div>
                      <div class="code-name">&amp;#xe656;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6a6;</span>
                      <div class="name">服务器_数据库_jurassic</div>
                      <div class="code-name">&amp;#xe6a6;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe628;</span>
                      <div class="name">DVLINK_大屏</div>
                      <div class="code-name">&amp;#xe628;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe65a;</span>
                      <div class="name">统计</div>
                      <div class="code-name">&amp;#xe65a;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe610;</span>
                      <div class="name">时间</div>
                      <div class="code-name">&amp;#xe610;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe73f;</span>
                      <div class="name">浏览</div>
                      <div class="code-name">&amp;#xe73f;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe63a;</span>
                      <div class="name">待办事项</div>
                      <div class="code-name">&amp;#xe63a;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe66b;</span>
                      <div class="name">注意事项</div>
                      <div class="code-name">&amp;#xe66b;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe648;</span>
                      <div class="name">热门</div>
                      <div class="code-name">&amp;#xe648;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe60f;</span>
                      <div class="name">趋势</div>
                      <div class="code-name">&amp;#xe60f;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe679;</span>
                      <div class="name">业务总量</div>
                      <div class="code-name">&amp;#xe679;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe661;</span>
                      <div class="name">排名</div>
                      <div class="code-name">&amp;#xe661;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe653;</span>
                      <div class="name">排名</div>
                      <div class="code-name">&amp;#xe653;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe618;</span>
                      <div class="name">词云图</div>
                      <div class="code-name">&amp;#xe618;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe749;</span>
                      <div class="name">数据</div>
                      <div class="code-name">&amp;#xe749;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe680;</span>
                      <div class="name">986菜单_资源共享</div>
                      <div class="code-name">&amp;#xe680;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe62e;</span>
                      <div class="name">配置数据源</div>
                      <div class="code-name">&amp;#xe62e;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe791;</span>
                      <div class="name">监控</div>
                      <div class="code-name">&amp;#xe791;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe674;</span>
                      <div class="name">新闻-登记人</div>
                      <div class="code-name">&amp;#xe674;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe608;</span>
                      <div class="name">配置管理</div>
                      <div class="code-name">&amp;#xe608;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe61f;</span>
                      <div class="name">分类</div>
                      <div class="code-name">&amp;#xe61f;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6d7;</span>
                      <div class="name">配置管理</div>
                      <div class="code-name">&amp;#xe6d7;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe630;</span>
                      <div class="name">待处理合同</div>
                      <div class="code-name">&amp;#xe630;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe620;</span>
                      <div class="name">数据</div>
                      <div class="code-name">&amp;#xe620;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe626;</span>
                      <div class="name">数据</div>
                      <div class="code-name">&amp;#xe626;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe666;</span>
                      <div class="name">w_发送</div>
                      <div class="code-name">&amp;#xe666;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe67c;</span>
                      <div class="name">管理</div>
                      <div class="code-name">&amp;#xe67c;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe639;</span>
                      <div class="name">申请开班</div>
                      <div class="code-name">&amp;#xe639;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe60e;</span>
                      <div class="name">数据</div>
                      <div class="code-name">&amp;#xe60e;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe61e;</span>
                      <div class="name">质量</div>
                      <div class="code-name">&amp;#xe61e;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe607;</span>
                      <div class="name">系统</div>
                      <div class="code-name">&amp;#xe607;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6d4;</span>
                      <div class="name">目录</div>
                      <div class="code-name">&amp;#xe6d4;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe644;</span>
                      <div class="name">ETL-SQL</div>
                      <div class="code-name">&amp;#xe644;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe790;</span>
                      <div class="name">收回 上下</div>
                      <div class="code-name">&amp;#xe790;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe743;</span>
                      <div class="name">全屏</div>
                      <div class="code-name">&amp;#xe743;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe64d;</span>
                      <div class="name">刷新</div>
                      <div class="code-name">&amp;#xe64d;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe659;</span>
                      <div class="name">警告</div>
                      <div class="code-name">&amp;#xe659;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe61a;</span>
                      <div class="name">民政</div>
                      <div class="code-name">&amp;#xe61a;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe643;</span>
                      <div class="name">节点连接</div>
                      <div class="code-name">&amp;#xe643;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6ab;</span>
                      <div class="name">数据</div>
                      <div class="code-name">&amp;#xe6ab;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe637;</span>
                      <div class="name">数据</div>
                      <div class="code-name">&amp;#xe637;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe642;</span>
                      <div class="name">无数据</div>
                      <div class="code-name">&amp;#xe642;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6fa;</span>
                      <div class="name">社区矫正局</div>
                      <div class="code-name">&amp;#xe6fa;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe647;</span>
                      <div class="name">体育</div>
                      <div class="code-name">&amp;#xe647;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe616;</span>
                      <div class="name">nav_党群档案</div>
                      <div class="code-name">&amp;#xe616;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe60c;</span>
                      <div class="name">行政管理</div>
                      <div class="code-name">&amp;#xe60c;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe600;</span>
                      <div class="name">政府保障</div>
                      <div class="code-name">&amp;#xe600;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe604;</span>
                      <div class="name">交通</div>
                      <div class="code-name">&amp;#xe604;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe632;</span>
                      <div class="name">居家生活</div>
                      <div class="code-name">&amp;#xe632;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe624;</span>
                      <div class="name">经济建设2</div>
                      <div class="code-name">&amp;#xe624;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe625;</span>
                      <div class="name">人</div>
                      <div class="code-name">&amp;#xe625;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe613;</span>
                      <div class="name">科技</div>
                      <div class="code-name">&amp;#xe613;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe87f;</span>
                      <div class="name">天气</div>
                      <div class="code-name">&amp;#xe87f;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe60b;</span>
                      <div class="name">教育</div>
                      <div class="code-name">&amp;#xe60b;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe60a;</span>
                      <div class="name">地球</div>
                      <div class="code-name">&amp;#xe60a;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe657;</span>
                      <div class="name">旅游</div>
                      <div class="code-name">&amp;#xe657;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6f6;</span>
                      <div class="name">国外律师事务所</div>
                      <div class="code-name">&amp;#xe6f6;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe609;</span>
                      <div class="name">军人 (1)</div>
                      <div class="code-name">&amp;#xe609;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6a4;</span>
                      <div class="name">城市</div>
                      <div class="code-name">&amp;#xe6a4;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe66f;</span>
                      <div class="name">商店</div>
                      <div class="code-name">&amp;#xe66f;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe664;</span>
                      <div class="name">天平、公平</div>
                      <div class="code-name">&amp;#xe664;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe67b;</span>
                      <div class="name">UI_icon2_综合1</div>
                      <div class="code-name">&amp;#xe67b;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe699;</span>
                      <div class="name">财务管理</div>
                      <div class="code-name">&amp;#xe699;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe619;</span>
                      <div class="name">综合管理</div>
                      <div class="code-name">&amp;#xe619;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe623;</span>
                      <div class="name">人像</div>
                      <div class="code-name">&amp;#xe623;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe667;</span>
                      <div class="name">定位</div>
                      <div class="code-name">&amp;#xe667;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe72f;</span>
                      <div class="name">新手引导</div>
                      <div class="code-name">&amp;#xe72f;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe63d;</span>
                      <div class="name">数据统计</div>
                      <div class="code-name">&amp;#xe63d;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe655;</span>
                      <div class="name">数据来源</div>
                      <div class="code-name">&amp;#xe655;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe859;</span>
                      <div class="name">星星</div>
                      <div class="code-name">&amp;#xe859;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe870;</span>
                      <div class="name">星星</div>
                      <div class="code-name">&amp;#xe870;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe606;</span>
                      <div class="name">关闭</div>
                      <div class="code-name">&amp;#xe606;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe621;</span>
                      <div class="name">删除</div>
                      <div class="code-name">&amp;#xe621;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe645;</span>
                      <div class="name">删除</div>
                      <div class="code-name">&amp;#xe645;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe72c;</span>
                      <div class="name">Business solutions </div>
                      <div class="code-name">&amp;#xe72c;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6ae;</span>
                      <div class="name">公文包</div>
                      <div class="code-name">&amp;#xe6ae;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe622;</span>
                      <div class="name">书架</div>
                      <div class="code-name">&amp;#xe622;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6da;</span>
                      <div class="name">签约</div>
                      <div class="code-name">&amp;#xe6da;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6de;</span>
                      <div class="name">营业执照</div>
                      <div class="code-name">&amp;#xe6de;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe72a;</span>
                      <div class="name">Briefcase </div>
                      <div class="code-name">&amp;#xe72a;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe72b;</span>
                      <div class="name">Employee salary</div>
                      <div class="code-name">&amp;#xe72b;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe72d;</span>
                      <div class="name">Bank transactions</div>
                      <div class="code-name">&amp;#xe72d;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe693;</span>
                      <div class="name">转正申请</div>
                      <div class="code-name">&amp;#xe693;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe677;</span>
                      <div class="name">跑步</div>
                      <div class="code-name">&amp;#xe677;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe601;</span>
                      <div class="name">党政联席会议</div>
                      <div class="code-name">&amp;#xe601;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe603;</span>
                      <div class="name">退伍复学生免修公共体育、军事技能和军事理</div>
                      <div class="code-name">&amp;#xe603;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe641;</span>
                      <div class="name">天气</div>
                      <div class="code-name">&amp;#xe641;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe658;</span>
                      <div class="name">人</div>
                      <div class="code-name">&amp;#xe658;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe62c;</span>
                      <div class="name">行政审批</div>
                      <div class="code-name">&amp;#xe62c;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe62d;</span>
                      <div class="name">七一建党节</div>
                      <div class="code-name">&amp;#xe62d;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe615;</span>
                      <div class="name">教育</div>
                      <div class="code-name">&amp;#xe615;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe694;</span>
                      <div class="name">天平，公平，平衡</div>
                      <div class="code-name">&amp;#xe694;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe692;</span>
                      <div class="name">证章申请</div>
                      <div class="code-name">&amp;#xe692;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6d1;</span>
                      <div class="name">Kids-yoga</div>
                      <div class="code-name">&amp;#xe6d1;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe614;</span>
                      <div class="name">旅游</div>
                      <div class="code-name">&amp;#xe614;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xeb53;</span>
                      <div class="name">地图</div>
                      <div class="code-name">&amp;#xeb53;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe61c;</span>
                      <div class="name">地图</div>
                      <div class="code-name">&amp;#xe61c;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe61d;</span>
                      <div class="name">S-农业</div>
                      <div class="code-name">&amp;#xe61d;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe636;</span>
                      <div class="name">房子</div>
                      <div class="code-name">&amp;#xe636;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe663;</span>
                      <div class="name">房子</div>
                      <div class="code-name">&amp;#xe663;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe60d;</span>
                      <div class="name">工厂</div>
                      <div class="code-name">&amp;#xe60d;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe68d;</span>
                      <div class="name">钱，赚钱，盈利，受益</div>
                      <div class="code-name">&amp;#xe68d;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe691;</span>
                      <div class="name">钱币，受益，存钱，盈利</div>
                      <div class="code-name">&amp;#xe691;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe678;</span>
                      <div class="name">科技</div>
                      <div class="code-name">&amp;#xe678;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe605;</span>
                      <div class="name">旅游景点</div>
                      <div class="code-name">&amp;#xe605;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe617;</span>
                      <div class="name">API管理</div>
                      <div class="code-name">&amp;#xe617;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe65f;</span>
                      <div class="name">API管理</div>
                      <div class="code-name">&amp;#xe65f;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe62b;</span>
                      <div class="name">查看</div>
                      <div class="code-name">&amp;#xe62b;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe64a;</span>
                      <div class="name">共享存储</div>
                      <div class="code-name">&amp;#xe64a;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe640;</span>
                      <div class="name">与我共享@2x</div>
                      <div class="code-name">&amp;#xe640;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6a2;</span>
                      <div class="name">数据</div>
                      <div class="code-name">&amp;#xe6a2;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe6ad;</span>
                      <div class="name">服务</div>
                      <div class="code-name">&amp;#xe6ad;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe61b;</span>
                      <div class="name">文档设置</div>
                      <div class="code-name">&amp;#xe61b;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe83c;</span>
                      <div class="name">Pdf</div>
                      <div class="code-name">&amp;#xe83c;</div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont">&#xe602;</span>
                      <div class="name">pdf</div>
                      <div class="code-name">&amp;#xe602;</div>
                  </li>

              </ul>
              <div class="article markdown">
                  <h2 id="unicode-">Unicode 引用</h2>
                  <hr>

                  <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
                  <ul>
                      <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
                      <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
                      <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
                  </ul>
                  <blockquote>
                      <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
                  </blockquote>
                  <p>Unicode 使用步骤如下：</p>
                  <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
                  <pre><code class="language-css"
                  >@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
                  <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
                  <pre><code class="language-css"
                  >.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                  <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
                  <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                  <blockquote>
                      <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                  </blockquote>
              </div>
          </div>
          <div class="content font-class">
              <ul class="icon_lists dib-box">

                  <li class="dib">
                      <span class="icon iconfont icon-wendang"></span>
                      <div class="name">
                          文档
                      </div>
                      <div class="code-name">.icon-wendang
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jinggao1"></span>
                      <div class="name">
                          警告
                      </div>
                      <div class="code-name">.icon-jinggao1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-xitongjiankong"></span>
                      <div class="name">
                          系统监控
                      </div>
                      <div class="code-name">.icon-xitongjiankong
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-change"></span>
                      <div class="name">
                          交换
                      </div>
                      <div class="code-name">.icon-change
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-gongwensousuo"></span>
                      <div class="name">
                          公文搜索
                      </div>
                      <div class="code-name">.icon-gongwensousuo
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-bumen"></span>
                      <div class="name">
                          部门
                      </div>
                      <div class="code-name">.icon-bumen
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-ETL-guanlian"></span>
                      <div class="name">
                          ETL-关联
                      </div>
                      <div class="code-name">.icon-ETL-guanlian
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-zonghejiankong"></span>
                      <div class="name">
                          综合监控
                      </div>
                      <div class="code-name">.icon-zonghejiankong
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jiankong"></span>
                      <div class="name">
                          监控
                      </div>
                      <div class="code-name">.icon-jiankong
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-iconset0199"></span>
                      <div class="name">
                          搜索文件夹
                      </div>
                      <div class="code-name">.icon-iconset0199
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-biaoqiansousuo"></span>
                      <div class="name">
                          标签搜索
                      </div>
                      <div class="code-name">.icon-biaoqiansousuo
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-quanxian"></span>
                      <div class="name">
                          权限
                      </div>
                      <div class="code-name">.icon-quanxian
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-sousuoliebiao2"></span>
                      <div class="name">
                          搜索列表2
                      </div>
                      <div class="code-name">.icon-sousuoliebiao2
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-yonghu"></span>
                      <div class="name">
                          用户
                      </div>
                      <div class="code-name">.icon-yonghu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-rizhi"></span>
                      <div class="name">
                          日志
                      </div>
                      <div class="code-name">.icon-rizhi
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-quanxianshenyue"></span>
                      <div class="name">
                          权限审阅
                      </div>
                      <div class="code-name">.icon-quanxianshenyue
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-guizehegexingjiancha"></span>
                      <div class="name">
                          规则合格性检查
                      </div>
                      <div class="code-name">.icon-guizehegexingjiancha
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-guanliyuansousuo_o"></span>
                      <div class="name">
                          管理员搜索_o
                      </div>
                      <div class="code-name">.icon-guanliyuansousuo_o
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-zidianguanli"></span>
                      <div class="name">
                          字典管理
                      </div>
                      <div class="code-name">.icon-zidianguanli
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-RectangleCopy3"></span>
                      <div class="name">
                          用户管理
                      </div>
                      <div class="code-name">.icon-RectangleCopy3
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-dingbudaohang-zhangh"></span>
                      <div class="name">
                          用户
                      </div>
                      <div class="code-name">.icon-dingbudaohang-zhangh
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-xiazai"></span>
                      <div class="name">
                          下载
                      </div>
                      <div class="code-name">.icon-xiazai
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-zuixinchanpin"></span>
                      <div class="name">
                          最新产品
                      </div>
                      <div class="code-name">.icon-zuixinchanpin
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-tongji"></span>
                      <div class="name">
                          统计
                      </div>
                      <div class="code-name">.icon-tongji
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-diannao"></span>
                      <div class="name">
                          电脑
                      </div>
                      <div class="code-name">.icon-diannao
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-pingtaijiyewujiankong"></span>
                      <div class="name">
                          平台级业务监控
                      </div>
                      <div class="code-name">.icon-pingtaijiyewujiankong
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-bumenguanli"></span>
                      <div class="name">
                          部门管理
                      </div>
                      <div class="code-name">.icon-bumenguanli
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-api"></span>
                      <div class="name">
                          api
                      </div>
                      <div class="code-name">.icon-api
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-daibanshixiang1"></span>
                      <div class="name">
                          代办事项
                      </div>
                      <div class="code-name">.icon-daibanshixiang1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jurassic_server"></span>
                      <div class="name">
                          服务器_数据库_jurassic
                      </div>
                      <div class="code-name">.icon-jurassic_server
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-DVLINK_daping"></span>
                      <div class="name">
                          DVLINK_大屏
                      </div>
                      <div class="code-name">.icon-DVLINK_daping
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-tongji1"></span>
                      <div class="name">
                          统计
                      </div>
                      <div class="code-name">.icon-tongji1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-icon-"></span>
                      <div class="name">
                          时间
                      </div>
                      <div class="code-name">.icon-icon-
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-liulan"></span>
                      <div class="name">
                          浏览
                      </div>
                      <div class="code-name">.icon-liulan
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-daibanshixiang"></span>
                      <div class="name">
                          待办事项
                      </div>
                      <div class="code-name">.icon-daibanshixiang
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-zhuyishixiang"></span>
                      <div class="name">
                          注意事项
                      </div>
                      <div class="code-name">.icon-zhuyishixiang
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-remen"></span>
                      <div class="name">
                          热门
                      </div>
                      <div class="code-name">.icon-remen
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-qushi"></span>
                      <div class="name">
                          趋势
                      </div>
                      <div class="code-name">.icon-qushi
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-yewuzongliang"></span>
                      <div class="name">
                          业务总量
                      </div>
                      <div class="code-name">.icon-yewuzongliang
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-paiming"></span>
                      <div class="name">
                          排名
                      </div>
                      <div class="code-name">.icon-paiming
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-paiming1"></span>
                      <div class="name">
                          排名
                      </div>
                      <div class="code-name">.icon-paiming1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-ciyuntu"></span>
                      <div class="name">
                          词云图
                      </div>
                      <div class="code-name">.icon-ciyuntu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-iconset0450"></span>
                      <div class="name">
                          数据
                      </div>
                      <div class="code-name">.icon-iconset0450
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-986caidan_ziyuangongxiang"></span>
                      <div class="name">
                          986菜单_资源共享
                      </div>
                      <div class="code-name">.icon-986caidan_ziyuangongxiang
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-peizhishujuyuan"></span>
                      <div class="name">
                          配置数据源
                      </div>
                      <div class="code-name">.icon-peizhishujuyuan
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-monitor"></span>
                      <div class="name">
                          监控
                      </div>
                      <div class="code-name">.icon-monitor
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-xinwen-dengjiren"></span>
                      <div class="name">
                          新闻-登记人
                      </div>
                      <div class="code-name">.icon-xinwen-dengjiren
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-peizhiguanli"></span>
                      <div class="name">
                          配置管理
                      </div>
                      <div class="code-name">.icon-peizhiguanli
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-fenlei"></span>
                      <div class="name">
                          分类
                      </div>
                      <div class="code-name">.icon-fenlei
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-RectangleCopy2"></span>
                      <div class="name">
                          配置管理
                      </div>
                      <div class="code-name">.icon-RectangleCopy2
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-daichulihetong"></span>
                      <div class="name">
                          待处理合同
                      </div>
                      <div class="code-name">.icon-daichulihetong
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-icon_huabanfuben1"></span>
                      <div class="name">
                          数据
                      </div>
                      <div class="code-name">.icon-icon_huabanfuben1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-icon_huabanfuben2"></span>
                      <div class="name">
                          数据
                      </div>
                      <div class="code-name">.icon-icon_huabanfuben2
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-w_fasong"></span>
                      <div class="name">
                          w_发送
                      </div>
                      <div class="code-name">.icon-w_fasong
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-guanli"></span>
                      <div class="name">
                          管理
                      </div>
                      <div class="code-name">.icon-guanli
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shenqingkaiban"></span>
                      <div class="name">
                          申请开班
                      </div>
                      <div class="code-name">.icon-shenqingkaiban
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shuju1"></span>
                      <div class="name">
                          数据
                      </div>
                      <div class="code-name">.icon-shuju1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-zhiliang"></span>
                      <div class="name">
                          质量
                      </div>
                      <div class="code-name">.icon-zhiliang
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-xitong-"></span>
                      <div class="name">
                          系统
                      </div>
                      <div class="code-name">.icon-xitong-
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-mulu"></span>
                      <div class="name">
                          目录
                      </div>
                      <div class="code-name">.icon-mulu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-ETL-SQL"></span>
                      <div class="name">
                          ETL-SQL
                      </div>
                      <div class="code-name">.icon-ETL-SQL
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shouhuishangxia"></span>
                      <div class="name">
                          收回 上下
                      </div>
                      <div class="code-name">.icon-shouhuishangxia
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-quanping"></span>
                      <div class="name">
                          全屏
                      </div>
                      <div class="code-name">.icon-quanping
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shuaxin"></span>
                      <div class="name">
                          刷新
                      </div>
                      <div class="code-name">.icon-shuaxin
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jinggao"></span>
                      <div class="name">
                          警告
                      </div>
                      <div class="code-name">.icon-jinggao
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-minzheng"></span>
                      <div class="name">
                          民政
                      </div>
                      <div class="code-name">.icon-minzheng
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jiedianlianjie"></span>
                      <div class="name">
                          节点连接
                      </div>
                      <div class="code-name">.icon-jiedianlianjie
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shuju"></span>
                      <div class="name">
                          数据
                      </div>
                      <div class="code-name">.icon-shuju
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-icon_huabanfuben"></span>
                      <div class="name">
                          数据
                      </div>
                      <div class="code-name">.icon-icon_huabanfuben
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-wushuju"></span>
                      <div class="name">
                          无数据
                      </div>
                      <div class="code-name">.icon-wushuju
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shequjiaozhengju"></span>
                      <div class="name">
                          社区矫正局
                      </div>
                      <div class="code-name">.icon-shequjiaozhengju
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-tiyu"></span>
                      <div class="name">
                          体育
                      </div>
                      <div class="code-name">.icon-tiyu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-nav_dangqundangan"></span>
                      <div class="name">
                          nav_党群档案
                      </div>
                      <div class="code-name">.icon-nav_dangqundangan
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-hangzhengguanli"></span>
                      <div class="name">
                          行政管理
                      </div>
                      <div class="code-name">.icon-hangzhengguanli
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-zhengfubaozhang"></span>
                      <div class="name">
                          政府保障
                      </div>
                      <div class="code-name">.icon-zhengfubaozhang
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jiaotong"></span>
                      <div class="name">
                          交通
                      </div>
                      <div class="code-name">.icon-jiaotong
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-ziyuan"></span>
                      <div class="name">
                          居家生活
                      </div>
                      <div class="code-name">.icon-ziyuan
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jingjijianshe"></span>
                      <div class="name">
                          经济建设2
                      </div>
                      <div class="code-name">.icon-jingjijianshe
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-ren1"></span>
                      <div class="name">
                          人
                      </div>
                      <div class="code-name">.icon-ren1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-keji1"></span>
                      <div class="name">
                          科技
                      </div>
                      <div class="code-name">.icon-keji1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-tianqi"></span>
                      <div class="name">
                          天气
                      </div>
                      <div class="code-name">.icon-tianqi
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jiaoyu1"></span>
                      <div class="name">
                          教育
                      </div>
                      <div class="code-name">.icon-jiaoyu1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-diqiu"></span>
                      <div class="name">
                          地球
                      </div>
                      <div class="code-name">.icon-diqiu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-lvyou"></span>
                      <div class="name">
                          旅游
                      </div>
                      <div class="code-name">.icon-lvyou
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-guowailvshishiwusuo"></span>
                      <div class="name">
                          国外律师事务所
                      </div>
                      <div class="code-name">.icon-guowailvshishiwusuo
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-junren"></span>
                      <div class="name">
                          军人 (1)
                      </div>
                      <div class="code-name">.icon-junren
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-77"></span>
                      <div class="name">
                          城市
                      </div>
                      <div class="code-name">.icon-77
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shangdian"></span>
                      <div class="name">
                          商店
                      </div>
                      <div class="code-name">.icon-shangdian
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-tianping"></span>
                      <div class="name">
                          天平、公平
                      </div>
                      <div class="code-name">.icon-tianping
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-UI_icon_zonghe"></span>
                      <div class="name">
                          UI_icon2_综合1
                      </div>
                      <div class="code-name">.icon-UI_icon_zonghe
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-caiwuguanli"></span>
                      <div class="name">
                          财务管理
                      </div>
                      <div class="code-name">.icon-caiwuguanli
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-zongheguanli"></span>
                      <div class="name">
                          综合管理
                      </div>
                      <div class="code-name">.icon-zongheguanli
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-renxiang"></span>
                      <div class="name">
                          人像
                      </div>
                      <div class="code-name">.icon-renxiang
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-dingwei"></span>
                      <div class="name">
                          定位
                      </div>
                      <div class="code-name">.icon-dingwei
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-xinshouyindao"></span>
                      <div class="name">
                          新手引导
                      </div>
                      <div class="code-name">.icon-xinshouyindao
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shujutongji"></span>
                      <div class="name">
                          数据统计
                      </div>
                      <div class="code-name">.icon-shujutongji
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shujulaiyuan"></span>
                      <div class="name">
                          数据来源
                      </div>
                      <div class="code-name">.icon-shujulaiyuan
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-xingxing"></span>
                      <div class="name">
                          星星
                      </div>
                      <div class="code-name">.icon-xingxing
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-xingxing1"></span>
                      <div class="name">
                          星星
                      </div>
                      <div class="code-name">.icon-xingxing1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-guanbi"></span>
                      <div class="name">
                          关闭
                      </div>
                      <div class="code-name">.icon-guanbi
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shanchu"></span>
                      <div class="name">
                          删除
                      </div>
                      <div class="code-name">.icon-shanchu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-shanchu1"></span>
                      <div class="name">
                          删除
                      </div>
                      <div class="code-name">.icon-shanchu1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-Businesssolutions"></span>
                      <div class="name">
                          Business solutions
                      </div>
                      <div class="code-name">.icon-Businesssolutions
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-gongwenbao1"></span>
                      <div class="name">
                          公文包
                      </div>
                      <div class="code-name">.icon-gongwenbao1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-xingzheng"></span>
                      <div class="name">
                          书架
                      </div>
                      <div class="code-name">.icon-xingzheng
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-qianyue"></span>
                      <div class="name">
                          签约
                      </div>
                      <div class="code-name">.icon-qianyue
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-yingyezhizhao"></span>
                      <div class="name">
                          营业执照
                      </div>
                      <div class="code-name">.icon-yingyezhizhao
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-Briefcase"></span>
                      <div class="name">
                          Briefcase
                      </div>
                      <div class="code-name">.icon-Briefcase
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-Employeesalary"></span>
                      <div class="name">
                          Employee salary
                      </div>
                      <div class="code-name">.icon-Employeesalary
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-Banktransactions"></span>
                      <div class="name">
                          Bank transactions
                      </div>
                      <div class="code-name">.icon-Banktransactions
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-zhuanzhengshenqing"></span>
                      <div class="name">
                          转正申请
                      </div>
                      <div class="code-name">.icon-zhuanzhengshenqing
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-paobu"></span>
                      <div class="name">
                          跑步
                      </div>
                      <div class="code-name">.icon-paobu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-dangzhenglianxihuiyi"></span>
                      <div class="name">
                          党政联席会议
                      </div>
                      <div class="code-name">.icon-dangzhenglianxihuiyi
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jun"></span>
                      <div class="name">
                          退伍复学生免修公共体育、军事技能和军事理
                      </div>
                      <div class="code-name">.icon-jun
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-tianqi1"></span>
                      <div class="name">
                          天气
                      </div>
                      <div class="code-name">.icon-tianqi1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-ren"></span>
                      <div class="name">
                          人
                      </div>
                      <div class="code-name">.icon-ren
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-hangzhengshenpi"></span>
                      <div class="name">
                          行政审批
                      </div>
                      <div class="code-name">.icon-hangzhengshenpi
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-qiyijiandangjie"></span>
                      <div class="name">
                          七一建党节
                      </div>
                      <div class="code-name">.icon-qiyijiandangjie
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-jiaoyu"></span>
                      <div class="name">
                          教育
                      </div>
                      <div class="code-name">.icon-jiaoyu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-huabanfuben"></span>
                      <div class="name">
                          天平，公平，平衡
                      </div>
                      <div class="code-name">.icon-huabanfuben
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-zhengzhangshenqing"></span>
                      <div class="name">
                          证章申请
                      </div>
                      <div class="code-name">.icon-zhengzhangshenqing
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-Kids-yoga"></span>
                      <div class="name">
                          Kids-yoga
                      </div>
                      <div class="code-name">.icon-Kids-yoga
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-lvyou1"></span>
                      <div class="name">
                          旅游
                      </div>
                      <div class="code-name">.icon-lvyou1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-ditu"></span>
                      <div class="name">
                          地图
                      </div>
                      <div class="code-name">.icon-ditu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-ditu1"></span>
                      <div class="name">
                          地图
                      </div>
                      <div class="code-name">.icon-ditu1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-S-nongye"></span>
                      <div class="name">
                          S-农业
                      </div>
                      <div class="code-name">.icon-S-nongye
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-fangzi"></span>
                      <div class="name">
                          房子
                      </div>
                      <div class="code-name">.icon-fangzi
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-fangzi1"></span>
                      <div class="name">
                          房子
                      </div>
                      <div class="code-name">.icon-fangzi1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-gongchang"></span>
                      <div class="name">
                          工厂
                      </div>
                      <div class="code-name">.icon-gongchang
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-huaban"></span>
                      <div class="name">
                          钱，赚钱，盈利，受益
                      </div>
                      <div class="code-name">.icon-huaban
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-huaban1"></span>
                      <div class="name">
                          钱币，受益，存钱，盈利
                      </div>
                      <div class="code-name">.icon-huaban1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-keji"></span>
                      <div class="name">
                          科技
                      </div>
                      <div class="code-name">.icon-keji
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-lvyoujingdian"></span>
                      <div class="name">
                          旅游景点
                      </div>
                      <div class="code-name">.icon-lvyoujingdian
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-APIwangguan"></span>
                      <div class="name">
                          API管理
                      </div>
                      <div class="code-name">.icon-APIwangguan
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-APIguanli"></span>
                      <div class="name">
                          API管理
                      </div>
                      <div class="code-name">.icon-APIguanli
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-chakan-copy"></span>
                      <div class="name">
                          查看
                      </div>
                      <div class="code-name">.icon-chakan-copy
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-gongxiangcunchu"></span>
                      <div class="name">
                          共享存储
                      </div>
                      <div class="code-name">.icon-gongxiangcunchu
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-yuwogongxiangx"></span>
                      <div class="name">
                          与我共享@2x
                      </div>
                      <div class="code-name">.icon-yuwogongxiangx
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-RectangleCopy"></span>
                      <div class="name">
                          数据
                      </div>
                      <div class="code-name">.icon-RectangleCopy
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-RectangleCopy1"></span>
                      <div class="name">
                          服务
                      </div>
                      <div class="code-name">.icon-RectangleCopy1
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-iconfront-"></span>
                      <div class="name">
                          文档设置
                      </div>
                      <div class="code-name">.icon-iconfront-
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-Pdf"></span>
                      <div class="name">
                          Pdf
                      </div>
                      <div class="code-name">.icon-Pdf
                      </div>
                  </li>

                  <li class="dib">
                      <span class="icon iconfont icon-pdf"></span>
                      <div class="name">
                          pdf
                      </div>
                      <div class="code-name">.icon-pdf
                      </div>
                  </li>

              </ul>
              <div class="article markdown">
                  <h2 id="font-class-">font-class 引用</h2>
                  <hr>

                  <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
                  <p>与 Unicode 使用方式相比，具有如下特点：</p>
                  <ul>
                      <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
                      <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
                      <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
                      <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
                  </ul>
                  <p>使用步骤如下：</p>
                  <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
                  <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                  <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
                  <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
                  <blockquote>
                      <p>"
                          iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                  </blockquote>
              </div>
          </div>
          <div class="content symbol">
              <ul class="icon_lists dib-box">

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-wendang"></use>
                      </svg>
                      <div class="name">文档</div>
                      <div class="code-name">#icon-wendang</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jinggao1"></use>
                      </svg>
                      <div class="name">警告</div>
                      <div class="code-name">#icon-jinggao1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-xitongjiankong"></use>
                      </svg>
                      <div class="name">系统监控</div>
                      <div class="code-name">#icon-xitongjiankong</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-change"></use>
                      </svg>
                      <div class="name">交换</div>
                      <div class="code-name">#icon-change</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-gongwensousuo"></use>
                      </svg>
                      <div class="name">公文搜索</div>
                      <div class="code-name">#icon-gongwensousuo</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-bumen"></use>
                      </svg>
                      <div class="name">部门</div>
                      <div class="code-name">#icon-bumen</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-ETL-guanlian"></use>
                      </svg>
                      <div class="name">ETL-关联</div>
                      <div class="code-name">#icon-ETL-guanlian</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-zonghejiankong"></use>
                      </svg>
                      <div class="name">综合监控</div>
                      <div class="code-name">#icon-zonghejiankong</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jiankong"></use>
                      </svg>
                      <div class="name">监控</div>
                      <div class="code-name">#icon-jiankong</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-iconset0199"></use>
                      </svg>
                      <div class="name">搜索文件夹</div>
                      <div class="code-name">#icon-iconset0199</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-biaoqiansousuo"></use>
                      </svg>
                      <div class="name">标签搜索</div>
                      <div class="code-name">#icon-biaoqiansousuo</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-quanxian"></use>
                      </svg>
                      <div class="name">权限</div>
                      <div class="code-name">#icon-quanxian</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-sousuoliebiao2"></use>
                      </svg>
                      <div class="name">搜索列表2</div>
                      <div class="code-name">#icon-sousuoliebiao2</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <div class="name">用户</div>
                      <div class="code-name">#icon-yonghu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-rizhi"></use>
                      </svg>
                      <div class="name">日志</div>
                      <div class="code-name">#icon-rizhi</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-quanxianshenyue"></use>
                      </svg>
                      <div class="name">权限审阅</div>
                      <div class="code-name">#icon-quanxianshenyue</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-guizehegexingjiancha"></use>
                      </svg>
                      <div class="name">规则合格性检查</div>
                      <div class="code-name">#icon-guizehegexingjiancha</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-guanliyuansousuo_o"></use>
                      </svg>
                      <div class="name">管理员搜索_o</div>
                      <div class="code-name">#icon-guanliyuansousuo_o</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-zidianguanli"></use>
                      </svg>
                      <div class="name">字典管理</div>
                      <div class="code-name">#icon-zidianguanli</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-RectangleCopy3"></use>
                      </svg>
                      <div class="name">用户管理</div>
                      <div class="code-name">#icon-RectangleCopy3</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-dingbudaohang-zhangh"></use>
                      </svg>
                      <div class="name">用户</div>
                      <div class="code-name">#icon-dingbudaohang-zhangh</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-xiazai"></use>
                      </svg>
                      <div class="name">下载</div>
                      <div class="code-name">#icon-xiazai</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-zuixinchanpin"></use>
                      </svg>
                      <div class="name">最新产品</div>
                      <div class="code-name">#icon-zuixinchanpin</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-tongji"></use>
                      </svg>
                      <div class="name">统计</div>
                      <div class="code-name">#icon-tongji</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-diannao"></use>
                      </svg>
                      <div class="name">电脑</div>
                      <div class="code-name">#icon-diannao</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-pingtaijiyewujiankong"></use>
                      </svg>
                      <div class="name">平台级业务监控</div>
                      <div class="code-name">#icon-pingtaijiyewujiankong</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-bumenguanli"></use>
                      </svg>
                      <div class="name">部门管理</div>
                      <div class="code-name">#icon-bumenguanli</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-api"></use>
                      </svg>
                      <div class="name">api</div>
                      <div class="code-name">#icon-api</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-daibanshixiang1"></use>
                      </svg>
                      <div class="name">代办事项</div>
                      <div class="code-name">#icon-daibanshixiang1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jurassic_server"></use>
                      </svg>
                      <div class="name">服务器_数据库_jurassic</div>
                      <div class="code-name">#icon-jurassic_server</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-DVLINK_daping"></use>
                      </svg>
                      <div class="name">DVLINK_大屏</div>
                      <div class="code-name">#icon-DVLINK_daping</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-tongji1"></use>
                      </svg>
                      <div class="name">统计</div>
                      <div class="code-name">#icon-tongji1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-icon-"></use>
                      </svg>
                      <div class="name">时间</div>
                      <div class="code-name">#icon-icon-</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-liulan"></use>
                      </svg>
                      <div class="name">浏览</div>
                      <div class="code-name">#icon-liulan</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-daibanshixiang"></use>
                      </svg>
                      <div class="name">待办事项</div>
                      <div class="code-name">#icon-daibanshixiang</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-zhuyishixiang"></use>
                      </svg>
                      <div class="name">注意事项</div>
                      <div class="code-name">#icon-zhuyishixiang</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-remen"></use>
                      </svg>
                      <div class="name">热门</div>
                      <div class="code-name">#icon-remen</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-qushi"></use>
                      </svg>
                      <div class="name">趋势</div>
                      <div class="code-name">#icon-qushi</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-yewuzongliang"></use>
                      </svg>
                      <div class="name">业务总量</div>
                      <div class="code-name">#icon-yewuzongliang</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-paiming"></use>
                      </svg>
                      <div class="name">排名</div>
                      <div class="code-name">#icon-paiming</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-paiming1"></use>
                      </svg>
                      <div class="name">排名</div>
                      <div class="code-name">#icon-paiming1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-ciyuntu"></use>
                      </svg>
                      <div class="name">词云图</div>
                      <div class="code-name">#icon-ciyuntu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-iconset0450"></use>
                      </svg>
                      <div class="name">数据</div>
                      <div class="code-name">#icon-iconset0450</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-986caidan_ziyuangongxiang"></use>
                      </svg>
                      <div class="name">986菜单_资源共享</div>
                      <div class="code-name">#icon-986caidan_ziyuangongxiang</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-peizhishujuyuan"></use>
                      </svg>
                      <div class="name">配置数据源</div>
                      <div class="code-name">#icon-peizhishujuyuan</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-monitor"></use>
                      </svg>
                      <div class="name">监控</div>
                      <div class="code-name">#icon-monitor</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-xinwen-dengjiren"></use>
                      </svg>
                      <div class="name">新闻-登记人</div>
                      <div class="code-name">#icon-xinwen-dengjiren</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-peizhiguanli"></use>
                      </svg>
                      <div class="name">配置管理</div>
                      <div class="code-name">#icon-peizhiguanli</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-fenlei"></use>
                      </svg>
                      <div class="name">分类</div>
                      <div class="code-name">#icon-fenlei</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-RectangleCopy2"></use>
                      </svg>
                      <div class="name">配置管理</div>
                      <div class="code-name">#icon-RectangleCopy2</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-daichulihetong"></use>
                      </svg>
                      <div class="name">待处理合同</div>
                      <div class="code-name">#icon-daichulihetong</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-icon_huabanfuben1"></use>
                      </svg>
                      <div class="name">数据</div>
                      <div class="code-name">#icon-icon_huabanfuben1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-icon_huabanfuben2"></use>
                      </svg>
                      <div class="name">数据</div>
                      <div class="code-name">#icon-icon_huabanfuben2</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-w_fasong"></use>
                      </svg>
                      <div class="name">w_发送</div>
                      <div class="code-name">#icon-w_fasong</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-guanli"></use>
                      </svg>
                      <div class="name">管理</div>
                      <div class="code-name">#icon-guanli</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shenqingkaiban"></use>
                      </svg>
                      <div class="name">申请开班</div>
                      <div class="code-name">#icon-shenqingkaiban</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shuju1"></use>
                      </svg>
                      <div class="name">数据</div>
                      <div class="code-name">#icon-shuju1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-zhiliang"></use>
                      </svg>
                      <div class="name">质量</div>
                      <div class="code-name">#icon-zhiliang</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-xitong-"></use>
                      </svg>
                      <div class="name">系统</div>
                      <div class="code-name">#icon-xitong-</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-mulu"></use>
                      </svg>
                      <div class="name">目录</div>
                      <div class="code-name">#icon-mulu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-ETL-SQL"></use>
                      </svg>
                      <div class="name">ETL-SQL</div>
                      <div class="code-name">#icon-ETL-SQL</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shouhuishangxia"></use>
                      </svg>
                      <div class="name">收回 上下</div>
                      <div class="code-name">#icon-shouhuishangxia</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-quanping"></use>
                      </svg>
                      <div class="name">全屏</div>
                      <div class="code-name">#icon-quanping</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shuaxin"></use>
                      </svg>
                      <div class="name">刷新</div>
                      <div class="code-name">#icon-shuaxin</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jinggao"></use>
                      </svg>
                      <div class="name">警告</div>
                      <div class="code-name">#icon-jinggao</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-minzheng"></use>
                      </svg>
                      <div class="name">民政</div>
                      <div class="code-name">#icon-minzheng</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jiedianlianjie"></use>
                      </svg>
                      <div class="name">节点连接</div>
                      <div class="code-name">#icon-jiedianlianjie</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shuju"></use>
                      </svg>
                      <div class="name">数据</div>
                      <div class="code-name">#icon-shuju</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-icon_huabanfuben"></use>
                      </svg>
                      <div class="name">数据</div>
                      <div class="code-name">#icon-icon_huabanfuben</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-wushuju"></use>
                      </svg>
                      <div class="name">无数据</div>
                      <div class="code-name">#icon-wushuju</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shequjiaozhengju"></use>
                      </svg>
                      <div class="name">社区矫正局</div>
                      <div class="code-name">#icon-shequjiaozhengju</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-tiyu"></use>
                      </svg>
                      <div class="name">体育</div>
                      <div class="code-name">#icon-tiyu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-nav_dangqundangan"></use>
                      </svg>
                      <div class="name">nav_党群档案</div>
                      <div class="code-name">#icon-nav_dangqundangan</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-hangzhengguanli"></use>
                      </svg>
                      <div class="name">行政管理</div>
                      <div class="code-name">#icon-hangzhengguanli</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-zhengfubaozhang"></use>
                      </svg>
                      <div class="name">政府保障</div>
                      <div class="code-name">#icon-zhengfubaozhang</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jiaotong"></use>
                      </svg>
                      <div class="name">交通</div>
                      <div class="code-name">#icon-jiaotong</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-ziyuan"></use>
                      </svg>
                      <div class="name">居家生活</div>
                      <div class="code-name">#icon-ziyuan</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jingjijianshe"></use>
                      </svg>
                      <div class="name">经济建设2</div>
                      <div class="code-name">#icon-jingjijianshe</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-ren1"></use>
                      </svg>
                      <div class="name">人</div>
                      <div class="code-name">#icon-ren1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-keji1"></use>
                      </svg>
                      <div class="name">科技</div>
                      <div class="code-name">#icon-keji1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-tianqi"></use>
                      </svg>
                      <div class="name">天气</div>
                      <div class="code-name">#icon-tianqi</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jiaoyu1"></use>
                      </svg>
                      <div class="name">教育</div>
                      <div class="code-name">#icon-jiaoyu1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-diqiu"></use>
                      </svg>
                      <div class="name">地球</div>
                      <div class="code-name">#icon-diqiu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-lvyou"></use>
                      </svg>
                      <div class="name">旅游</div>
                      <div class="code-name">#icon-lvyou</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-guowailvshishiwusuo"></use>
                      </svg>
                      <div class="name">国外律师事务所</div>
                      <div class="code-name">#icon-guowailvshishiwusuo</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-junren"></use>
                      </svg>
                      <div class="name">军人 (1)</div>
                      <div class="code-name">#icon-junren</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-77"></use>
                      </svg>
                      <div class="name">城市</div>
                      <div class="code-name">#icon-77</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shangdian"></use>
                      </svg>
                      <div class="name">商店</div>
                      <div class="code-name">#icon-shangdian</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-tianping"></use>
                      </svg>
                      <div class="name">天平、公平</div>
                      <div class="code-name">#icon-tianping</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-UI_icon_zonghe"></use>
                      </svg>
                      <div class="name">UI_icon2_综合1</div>
                      <div class="code-name">#icon-UI_icon_zonghe</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-caiwuguanli"></use>
                      </svg>
                      <div class="name">财务管理</div>
                      <div class="code-name">#icon-caiwuguanli</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-zongheguanli"></use>
                      </svg>
                      <div class="name">综合管理</div>
                      <div class="code-name">#icon-zongheguanli</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-renxiang"></use>
                      </svg>
                      <div class="name">人像</div>
                      <div class="code-name">#icon-renxiang</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-dingwei"></use>
                      </svg>
                      <div class="name">定位</div>
                      <div class="code-name">#icon-dingwei</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-xinshouyindao"></use>
                      </svg>
                      <div class="name">新手引导</div>
                      <div class="code-name">#icon-xinshouyindao</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shujutongji"></use>
                      </svg>
                      <div class="name">数据统计</div>
                      <div class="code-name">#icon-shujutongji</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shujulaiyuan"></use>
                      </svg>
                      <div class="name">数据来源</div>
                      <div class="code-name">#icon-shujulaiyuan</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-xingxing"></use>
                      </svg>
                      <div class="name">星星</div>
                      <div class="code-name">#icon-xingxing</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-xingxing1"></use>
                      </svg>
                      <div class="name">星星</div>
                      <div class="code-name">#icon-xingxing1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-guanbi"></use>
                      </svg>
                      <div class="name">关闭</div>
                      <div class="code-name">#icon-guanbi</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shanchu"></use>
                      </svg>
                      <div class="name">删除</div>
                      <div class="code-name">#icon-shanchu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-shanchu1"></use>
                      </svg>
                      <div class="name">删除</div>
                      <div class="code-name">#icon-shanchu1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-Businesssolutions"></use>
                      </svg>
                      <div class="name">Business solutions </div>
                      <div class="code-name">#icon-Businesssolutions</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-gongwenbao1"></use>
                      </svg>
                      <div class="name">公文包</div>
                      <div class="code-name">#icon-gongwenbao1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-xingzheng"></use>
                      </svg>
                      <div class="name">书架</div>
                      <div class="code-name">#icon-xingzheng</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-qianyue"></use>
                      </svg>
                      <div class="name">签约</div>
                      <div class="code-name">#icon-qianyue</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-yingyezhizhao"></use>
                      </svg>
                      <div class="name">营业执照</div>
                      <div class="code-name">#icon-yingyezhizhao</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-Briefcase"></use>
                      </svg>
                      <div class="name">Briefcase </div>
                      <div class="code-name">#icon-Briefcase</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-Employeesalary"></use>
                      </svg>
                      <div class="name">Employee salary</div>
                      <div class="code-name">#icon-Employeesalary</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-Banktransactions"></use>
                      </svg>
                      <div class="name">Bank transactions</div>
                      <div class="code-name">#icon-Banktransactions</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-zhuanzhengshenqing"></use>
                      </svg>
                      <div class="name">转正申请</div>
                      <div class="code-name">#icon-zhuanzhengshenqing</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-paobu"></use>
                      </svg>
                      <div class="name">跑步</div>
                      <div class="code-name">#icon-paobu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-dangzhenglianxihuiyi"></use>
                      </svg>
                      <div class="name">党政联席会议</div>
                      <div class="code-name">#icon-dangzhenglianxihuiyi</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jun"></use>
                      </svg>
                      <div class="name">退伍复学生免修公共体育、军事技能和军事理</div>
                      <div class="code-name">#icon-jun</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-tianqi1"></use>
                      </svg>
                      <div class="name">天气</div>
                      <div class="code-name">#icon-tianqi1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-ren"></use>
                      </svg>
                      <div class="name">人</div>
                      <div class="code-name">#icon-ren</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-hangzhengshenpi"></use>
                      </svg>
                      <div class="name">行政审批</div>
                      <div class="code-name">#icon-hangzhengshenpi</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-qiyijiandangjie"></use>
                      </svg>
                      <div class="name">七一建党节</div>
                      <div class="code-name">#icon-qiyijiandangjie</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-jiaoyu"></use>
                      </svg>
                      <div class="name">教育</div>
                      <div class="code-name">#icon-jiaoyu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-huabanfuben"></use>
                      </svg>
                      <div class="name">天平，公平，平衡</div>
                      <div class="code-name">#icon-huabanfuben</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-zhengzhangshenqing"></use>
                      </svg>
                      <div class="name">证章申请</div>
                      <div class="code-name">#icon-zhengzhangshenqing</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-Kids-yoga"></use>
                      </svg>
                      <div class="name">Kids-yoga</div>
                      <div class="code-name">#icon-Kids-yoga</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-lvyou1"></use>
                      </svg>
                      <div class="name">旅游</div>
                      <div class="code-name">#icon-lvyou1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-ditu"></use>
                      </svg>
                      <div class="name">地图</div>
                      <div class="code-name">#icon-ditu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-ditu1"></use>
                      </svg>
                      <div class="name">地图</div>
                      <div class="code-name">#icon-ditu1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-S-nongye"></use>
                      </svg>
                      <div class="name">S-农业</div>
                      <div class="code-name">#icon-S-nongye</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-fangzi"></use>
                      </svg>
                      <div class="name">房子</div>
                      <div class="code-name">#icon-fangzi</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-fangzi1"></use>
                      </svg>
                      <div class="name">房子</div>
                      <div class="code-name">#icon-fangzi1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-gongchang"></use>
                      </svg>
                      <div class="name">工厂</div>
                      <div class="code-name">#icon-gongchang</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-huaban"></use>
                      </svg>
                      <div class="name">钱，赚钱，盈利，受益</div>
                      <div class="code-name">#icon-huaban</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-huaban1"></use>
                      </svg>
                      <div class="name">钱币，受益，存钱，盈利</div>
                      <div class="code-name">#icon-huaban1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-keji"></use>
                      </svg>
                      <div class="name">科技</div>
                      <div class="code-name">#icon-keji</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-lvyoujingdian"></use>
                      </svg>
                      <div class="name">旅游景点</div>
                      <div class="code-name">#icon-lvyoujingdian</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-APIwangguan"></use>
                      </svg>
                      <div class="name">API管理</div>
                      <div class="code-name">#icon-APIwangguan</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-APIguanli"></use>
                      </svg>
                      <div class="name">API管理</div>
                      <div class="code-name">#icon-APIguanli</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-chakan-copy"></use>
                      </svg>
                      <div class="name">查看</div>
                      <div class="code-name">#icon-chakan-copy</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-gongxiangcunchu"></use>
                      </svg>
                      <div class="name">共享存储</div>
                      <div class="code-name">#icon-gongxiangcunchu</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-yuwogongxiangx"></use>
                      </svg>
                      <div class="name">与我共享@2x</div>
                      <div class="code-name">#icon-yuwogongxiangx</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-RectangleCopy"></use>
                      </svg>
                      <div class="name">数据</div>
                      <div class="code-name">#icon-RectangleCopy</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-RectangleCopy1"></use>
                      </svg>
                      <div class="name">服务</div>
                      <div class="code-name">#icon-RectangleCopy1</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-iconfront-"></use>
                      </svg>
                      <div class="name">文档设置</div>
                      <div class="code-name">#icon-iconfront-</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-Pdf"></use>
                      </svg>
                      <div class="name">Pdf</div>
                      <div class="code-name">#icon-Pdf</div>
                  </li>

                  <li class="dib">
                      <svg class="icon svg-icon" aria-hidden="true">
                          <use xlink:href="#icon-pdf"></use>
                      </svg>
                      <div class="name">pdf</div>
                      <div class="code-name">#icon-pdf</div>
                  </li>

              </ul>
              <div class="article markdown">
                  <h2 id="symbol-">Symbol 引用</h2>
                  <hr>

                  <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
                      这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
                  <ul>
                      <li>支持多色图标了，不再受单色限制。</li>
                      <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
                      <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
                      <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
                  </ul>
                  <p>使用步骤如下：</p>
                  <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
                  <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                  <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
                  <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                  <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
                  <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
              </div>
          </div>

      </div>
  </div>
  <script>
      $(document).ready(function () {
          $('.tab-container .content:first').show()

          $('#tabs li').click(function (e) {
              var tabContent = $('.tab-container .content')
              var index = $(this).index()

              if ($(this).hasClass('active')) {
                  return
              } else {
                  $('#tabs li').removeClass('active')
                  $(this).addClass('active')

                  tabContent.hide().eq(index).fadeIn()
              }
          })
      })
  </script>
  </body>
</html>
